<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="登录"
        right-text="去注册"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </header>
    <div class="content">
      <van-tabs v-model="active">
        <van-tab title="用户名登录">
          <van-form @submit="onSubmitUser">
            <van-field
              v-model="username"
              name="userName"
              label="用户名"
              clearable
              placeholder="用户名"
              :right-icon="userTip"
            />
            <van-field
              v-model="password1"
              type="password"
              name="passWord"
              label="密码"
              clearable
              placeholder="密码"
              :right-icon="passwordTip1"
            />
            <div style="margin: 16px;">
              <van-button round block type="info" native-type="submit" :disabled="allTip1">
                登录
              </van-button>
            </div>
          </van-form>
        </van-tab>
        <van-tab title="手机号登录">
          <van-form @submit="onSubmitTel">
            <van-field
              v-model="tel"
              name="tel"
              label="手机号"
              clearable
              placeholder="手机号"
              :right-icon="telTip"
            />
            <van-field
              v-model="password2"
              type="password"
              name="passWord"
              label="密码"
              clearable
              placeholder="密码"
              :right-icon="passwordTip2"
            />
            <div style="margin: 16px;">
              <van-button round block type="info" native-type="submit" :disabled="allTip2">
                登录
              </van-button>
            </div>
          </van-form>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Form, Field, Button, Toast, Tab, Tabs } from 'vant'
import { login } from '../../api/index.js'

Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.use(Toast)
Vue.use(Tab)
Vue.use(Tabs)

export default {
  data () {
    return {
      username: '',
      tel: '',
      password1: '',
      password2: '',
      active: 1
    }
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    onClickRight () {
      this.$router.push('/register')
    },
    onSubmitUser (val) {
      // 用户名登录
      login(val).then(res => {
        console.log(res.data)
      })
    },
    onSubmitTel (val) {
      // 手机号登录
      login(val).then(res => {
        console.log(res.data)
        switch (res.data.state) {
          case 201:
            Toast({
              message: '手机号未注册',
              onClose: () => {
                this.$router.push('/register')
              }
            })
            break
          case 202:
            Toast('密码不符')
            break
          case 200:
            // 本地存储：
            // 存储后端的登录状态token
            localStorage.setItem('token', res.data.token)
            // 存储前端的登录状态abc=qwe
            localStorage.setItem('isLogin', 'ok')
            // 为了方便操作,存储用户id
            localStorage.setItem('userId', res.data.id)
            // this.$router.push('/home')
            Toast({
              message: '登录成功',
              onClose: () => {
                if (this.$route.query.to) {
                  // 跳转到指定路由
                  this.$router.push(this.$route.query.to)
                } else {
                  // 根据需求,默认跳转的路由
                  this.$router.push('/home')
                }
              }
            })
        }
      })
    }
  },
  computed: {
    userTip () {
      // 用户名的正则验证
      if (/^.{2,12}$/.test(this.username)) {
        return 'success'
      } else {
        return ''
      }
    },
    telTip () {
      if (/^1[3-9]\d{9}$/.test(this.tel)) {
        return 'success'
      } else {
        return ''
      }
    },
    passwordTip1 () {
      if (/^\w{6,12}$/.test(this.password1)) {
        return 'success'
      } else {
        return ''
      }
    },
    passwordTip2 () {
      if (/^\w{6,12}$/.test(this.password2)) {
        return 'success'
      } else {
        return ''
      }
    },
    allTip1 () {
      // 注册按钮的可用状态,根据所有输入框的状态决定
      if (this.userTip && this.passwordTip1) {
        return false
      } else {
        return true
      }
    },
    allTip2 () {
      // 注册按钮的可用状态,根据所有输入框的状态决定
      if (this.telTip && this.passwordTip2) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style>
</style>
